<template>
  <div class="page-index">
    <div class="header-box" style="position: fixed;top: 0;left: 0;right: 0;z-index:2;">
      <PageHeader title="新建费用"></PageHeader>
    </div>
   <div class="main">
    <div class="top">
      <van-cell :title="title"  is-link :required="true" >
        <template #icon>
          <img :src="ico" alt="">
        </template>
      </van-cell>
    </div>
    <div class="personal-expenses-box">
      <div class="personal-expenses-title">
        个人费用
      </div>
      <van-field v-model="moneyValue" required class="money-cell">
        <template #label>
          <div class="money-label">
            <span>金额</span>
            <span>CNY</span>
          </div>
        </template>
      </van-field>
      <div class="money-tip">
        <div class="tip-text">
          上传发票后，消费金额可根据发票金额自动计算
        </div>
        <div class="tip-icon">
          <img :src="delIcon" alt="">
        </div>
      </div>
      <van-field v-model="dateValue" label="消费日期" required class="date-cell" @click="showDate=true" >
      </van-field>
      <van-field label="消费城市" required class="city-cell">
        <template #input>
          <div class="city-value">
            <span>
              松江区
            </span>
            <span>-</span>
            <span>目的地</span>
          </div>
        </template>
      </van-field>
      <!-- <van-field label="消费城市" required class="city-cell">
        <template #input>
          <div class="city-value">
              <van-field v-model="startPlaceValue" class="date-cell"/>
            <span>-</span>
            <van-field v-model="endPlaceValue" class="date-cell" placeholder="目的地"/>
          </div>
        </template>
      </van-field> -->
      <van-field
       class="remarks-cell"
        v-model="message"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        maxlength="300"
        placeholder="请输入备注信息"
        show-word-limit
      />
    </div>
    <div class="invoice-box">
      <div class="invoice-top">
        <div class="invoice-top-left">发票</div>
        <div class="invoice-top-right">0/30</div>
      </div>
      <div class="invoice-center">
        <div class="upload-icon">
          <img :src="addIcon" alt="">
        </div>
        <div class="upload-text">上传发票</div>
      </div>
    </div>
    <van-field
      class="accommodation-class-cell"
      v-model="classValue"
      clearable
      label="舱位级别"
    />
    <div class="share-info-box">
      <div class="invoice-top">
        <div class="invoice-top-left">分摊信息</div>
      </div>
      <div class="invoice-center" @click="toShare()">
        <div class="upload-icon">
          <img :src="addIcon" alt="">
        </div>
        <div class="upload-text">新建分摊</div>
      </div>
    </div>
    <div class="bottom">
      <van-button type="info">再记一笔</van-button>
      <van-button type="info">保存</van-button>
    </div>
   </div>
    <van-calendar v-model="showDate"   @confirm="dateOnConfirm" :min-date="minDate" />
  </div>
</template>
<script>
import PageHeader from "../../../src/components/header"
import { formatdate } from '../../utils/formatDateUtil';
export default {
  data() {
    return {
        ico:require('../../assets/newCost/flag.png'),
        title:'飞机',
        moneyValue:'123',
        delIcon:require('../../assets/newCost/del.png'),
        dateValue:'2022-05-20',
        showDate:false,
        minDate:new Date(1901, 0, 1),
        message:'',
        addIcon:require('../../assets/newCost/addIcon.png'),
        classValue:'商务舱',
        startPlaceValue:'松江区',
        endPlaceValue:''
    };
  },
  components:{
        PageHeader
  },
  methods:{
      dateOnConfirm(date){
        //日期的确认        
        this.dateValue=formatdate(date,1);
        this.showDate= false;				
      },
      toShare(){
          this.$router.push({
          path:'/share',
          query:{

          }
        })
      },
  }
}
</script>
<style lang="scss" scoped>
   html{
    overflow: hidden;
   }
   .main{
    margin-top: 63.98px;
    background: rgba(250, 250, 250, 1);
    overflow-y: auto;
    margin-bottom: 44px;
    .top{
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 4px 8px rgb(238 238 238);
     margin-bottom: 12px;
     .van-cell{
       padding: 4.67vw 4.27vw !important;
       align-items: center;
       img{
         display: inline-block;
         width: 32px;
         height:32px;
       }
     }
    }
    .personal-expenses-box{
      // padding: 0 16px;
      background: rgba(255, 255, 255, 1);
      .personal-expenses-title{
        margin: 12px 0px 16px 16px;
        border-left: 3px solid rgba(23, 119, 255, 1);
        font-size: 14px;
        line-height: 20px;
        padding-left: 5px;
        font-family:"SimHei";
      }

      .money-cell{
        margin: 0 16px;
        box-sizing: border-box;
        border-top: none;
        padding: 0px 0px 12px 6px;
        .money-label{

          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-right: 18px;
          border-right: 1px solid rgba(238, 238, 238, 1);
          span{
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            line-height: 20px;
            font-family:"SimHei";
          }
          span:first-of-type{
           display: inline-block;
           width: 58px;
           height: 20px;
           color: rgba(0, 0, 0, 1);
           margin-right: 32px;
         }
        }
        
      }
      .money-tip{
        width: 100%;
        height: 26px;
        background: rgba(23, 119, 255, 0.05);
        display: flex;
        justify-content: space-between;
        // align-items: center;
        padding: 4px 24px;
        box-sizing: border-box;
        margin-bottom: 12px;
        .tip-text{
          height: 18px;
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
          font-family:"SimHei";
        }
        .tip-icon{
          width: 12px;
          height: 12px;
          img{
            width: 100%;
            height:100%;
          }
        }
      }
      .date-cell{
        margin: 0 16px 12px;
        box-sizing: border-box;
        border-top: none;
        padding: 0px 0px 12px 6px;
      }
      .city-cell{
        margin: 0 16px 12px;
        box-sizing: border-box;
        border-top: none;
        padding: 0px 0px 12px 6px;
        .city-value{
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
        span:nth-child(2) {
          display: inline-block;
          margin:0 16px;
        }
        span:nth-child(3) {
          color: rgba(153, 153, 153, 1);
        }
      }
      .remarks-cell{
        box-sizing: border-box;
        padding: 0px;
        border: none;
        margin: 0px 8px 12px 24px;
        width: auto;
      }
    }
    .invoice-box,.share-info-box{
      margin-bottom: 12px;
      padding-bottom: 12px;
      background: rgba(255, 255, 255, 1);
      .invoice-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 21px 0px 24px;
        margin-bottom: 9px;
        .invoice-top-left{
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          line-height: 20px;
          height:20px;
          font-family:"SimHei";
        }
        .invoice-top-right{
          height: 24px;
          color: rgba(187, 187, 187, 1);
          font-size: 12px;
          line-height: 24px;
          font-family:"SimHei";
        }
      }
      .invoice-center{
        display: flex;
        justify-content: center;
        align-items: center;
        .upload-icon{
          width: 14px;
          height: 14px;
          margin-right: 8px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .upload-text{
          width: 58px;
          height: 20px;
          color: rgba(23, 119, 255, 1);
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
    .accommodation-class-cell{
      border:none;
      box-sizing: border-box;
      padding: 12px 0px;
      border: none;
      margin: 0px 8px 12px 24px;
      width: auto;
    }
    .share-info-box{
      margin-bottom: 0px;
    }
    .bottom{
      padding: 14px 24px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
   }
   ::v-deep .van-field__label{
     width: auto;
     margin-right: 32px;
   }
   .money-cell ::v-deep .van-field__label{
    width: auto;
    margin-right: 16px;
   }
   .money-cell ::v-deep .van-field__control{
      color: rgba(23, 119, 255, 1);
      font-size: 14px;
      line-height: 20px;
      font-family:"SimHei";
    }
    ::v-deep .van-cell--required::before {
        position: absolute;
        left: 0;
        color: #ee0a24;
        font-size: 3.73vw;
        content: '*';
    }
   ::v-deep .van-field{
    border-bottom: 1px solid rgba(245, 245, 245, 1);
   }
   ::v-deep .van-cell__title span{
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    line-height: 20px;
    font-family:"SimHei";
   }
   .remarks-cell ::v-deep .van-field__label{
    width: 64px;
    height: 20px;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    line-height: 20px;
    margin-right: 26px;
   }
   .remarks-cell ::v-deep .van-cell__value{
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
    line-height: 20px;
    padding-right: 16px;
   }
   .accommodation-class-cell ::v-deep .van-field__label{
    width: 64px;
    height: 20px;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    line-height: 20px;
    margin-right: 26px;
   }
   .accommodation-class-cell ::v-deep .van-cell__value{
    color: rgba(153, 153, 153, 1);
    font-size: 14px;
    line-height: 20px;
    padding-right: 16px;
   }
   .bottom ::v-deep .van-button{
      border-radius: 18px;
      height: 36px;
      color: rgba(51, 51, 51, 1);
      // font-size: 16px;
      line-height: 36px;
   }
   .bottom ::v-deep .van-button:nth-of-type(1){
      // width: 86px;
      // height: 20px;
      color: rgba(51, 51, 51, 1);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 8px rgba(238, 238, 238, 1);
      padding: 0px 36px;
      margin-right: 11px;
   }
   .bottom ::v-deep .van-button:nth-of-type(2){
      color: rgba(255, 255, 255, 1);
      background: rgba(23, 119, 255, 1);
      box-shadow: 0px 4px 8px rgba(23, 119, 255, 0.3);
      // width: 42px;
      // height: 24px;
      padding: 0px 58px;
   }
</style>
